<template>
    <div class="Nav_bottom border-top">
        <router-link tag="div" v-for="(item, index) in navlist" :key="index" class="nav_item" :to="{name:item.test}" @click.native="switchNav(index)">
            <span class="iconfont" :class="item.iconfont2"></span>
            <span :class="{'green':item.test==seleTest}">{{item.test}}</span>
        </router-link>
    </div>
</template>
<script>
export default {
    data(){
        return {
            navlist:[
                {
                    iconfont:'icon-xiaoxi1',
                    SelectionIcon:'icon-xiaoxi',
                    test:'微信',
                    iconfont2:"icon-xiaoxi1"
                },
                {
                    iconfont:'icon-tongxunlu',
                    SelectionIcon:'icon-tongxunlu1',
                    test:'通讯录',
                    iconfont2:"icon-tongxunlu"
                },
                {
                    iconfont:'icon-faxian',
                    SelectionIcon:'icon-faxian1',
                    test:'发现',
                    iconfont2:"icon-faxian"
                },
                {
                    iconfont:'icon-wo',
                    SelectionIcon:'icon-wodedangxuan',
                    test:'我',
                    iconfont2:"icon-wo"
                }
            ],
            seleTest:"微信"
        }
    },
    watch: {
        $route(){
            this.seleTest=this.$route.name
            this.navlist.forEach(item => {
                if(item.test==this.$route.name){
                    item.iconfont2=item.SelectionIcon
                }else{
                    item.iconfont2=item.iconfont
                }
            });
        }
    },
    methods:{
        switchNav(index){
            this.navlist.forEach(item => {
                item.iconfont2=item.iconfont
            });
            this.seleTest = this.navlist[index].test
            this.navlist[index].iconfont2 = this.navlist[index].SelectionIcon
        }
    },
    mounted(){
       this.seleTest=this.$route.name
       this.navlist.forEach(item => {
           if(item.test==this.$route.name){
               item.iconfont2=item.SelectionIcon
           }
       });
    }

}
</script>



<style lang="scss" scoped>
.Nav_bottom{
    position: fixed;
    bottom: 0rem;
    left: 0;
    right: 0;
    z-index: 10;
    height: $bottomNavHeight;
    background: $Navbar_bg_color;
    display: flex;
    align-items: center;
    .nav_item{
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        .iconfont{
            font-size: 1.48rem !important;
        }
    }
}
.icon-xiaoxi,
.icon-tongxunlu1,
.icon-faxian1,
.icon-wodedangxuan,
.green{
    color: $sele_bar_color;
}
</style>

